<%--
  Created by IntelliJ IDEA.
  User: food
  Date: 2022/11/8
  Time: 3:49 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">

    <!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>

    <!-- Bootstrap5 图标库 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
            integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
            integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
            crossorigin="anonymous"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/导航样式.css" type="text/css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/首页样式.css" type="text/css">
    <style>
        /* popular用于制作我们热爱的艺术家中的人物图片 */

        .popular {
            width: 120px;
            height: 120px;
            border-radius: 120px;
            overflow: hidden;
            display: inline-block;
            vertical-align: top;
            text-align: center;
        }

        /* 背景设置，暂时用不上，先留着，后面再用 */

        .background_chat {
            background-size: 800px 539px;
            background-position: 50%;
            background-repeat: no-repeat;
            position: absolute;
            right: 0;
            top: 0;
            width: 800px;
            height: 539px;
        }

        /* 胶囊字体颜色 */
        .c .nav-link {
            background-color: white;
        }

        .c .nav-link:hover {
            background-color: #d5a770;
        }

        .img-auto {
            width: auto;
            height: auto;
            max-width: 100px;
            max-height: 100px;
        }

        .from-lab-gray {
            background-color: #f2f2f2;
            border: 2px solid transparent;
            border-radius: 0;
        }

        /* header*/
        .header-box {

            position: relative;
        }

        .header-menu {
            position: relative;
            display: none;
        }

        .header-box:hover .header-menu {
            display: block;

        }

        /* 鼠标经过时改变字体颜色 */
    </style>

</head>

<body class="">
<!-- 头部导航 -->
<jsp:include page="${pageContext.request.contextPath}/pages/index/header.jsp"/>
<!-- 身体-登录界面-标志 -->
<section class="bg-white m-auto" style="width:100%">
    <section class="page-intro " style="padding-top:240px;">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-2 m-auto ">
                    <div class="icon icon-ico-user text-center">
                        <svg class=""
                             style="color: #d5a770;width: 100px;height:100px;" xmlns="http://www.w3.org/2000/svg"
                             width="16" height="16" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
                            <path
                                    d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
                        </svg>
                    </div>
                    <br>
                    <div class="text-center h1 pb-5">
                        <p> 登陆</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="" style="width:100%;display: block;background-color: #F8F8F8;;">
        <div class="container m-auto">
            <div class="row">
                <div class="col">
                    <form name="login" method="post" action="/LoginServlet" class="login-form" data-label="login">
                        <div class="d-flex justify-content-center  ">
                            <div class="m-auto  float-start  p-1 ">
                                <div class="form-group p-1  mt-5 h6"><label class="control-label required p-1"
                                                                            for="login_username" style="width:380px;">用户名</label>
                                    <input type="text"
                                           id="login_username" name="uname" required="required"
                                           placeholder="用户名" class="form-control"></div>
                                <div class="form-group p-1 h6"><label class="control-label required p-1"
                                                                      for="login_password">密码</label> <input
                                        type="password" id="login_password"
                                        name="pwd" required="required" placeholder="密码"
                                        class="form-control"></div>

                                <div class="">
                                    <div class="input-element check-element">
                                        <input class="" style="color: #d5a770;" type="checkbox" id="remember_me"
                                               name="remember_me" checked="">
                                        <label class="p-2 " for="remember_me">保持登陆</label>
                                    </div>
                                </div>
                                <input type="submit" class="btn text-white text-center3 " value="确认"
                                       data-bs-toggle="modal" data-bs-target="#link"
                                       style="background-color: #d5a770;width:110px;height:50px;">
                                <i
                                        class="icon icon-ico-arrow-new-right">
                                    <svg class="text-white m-auto"
                                         style="width: 16px;height:16px;" xmlns="http://www.w3.org/2000/svg"
                                         width="16" height="16" fill="currentColor" class="bi bi-arrow-right"
                                         viewBox="0 0 16 16">
                                        <path fill-rule="evenodd"
                                              d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
                                    </svg>
                                </i></input>
                            </div>
                        </div>
                        <input type="hidden" id="login__token" name="login[_token]"
                               value="_FNB5m7ThzXRoiQgAwsempdnfhuQ2q-TiOzWCkK2Des">
                    </form>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="text-center p-5 ">
                        <a class="text-decoration-none text-secondary"
                           href="${pageContext.request.contextPath}/pages/user/creatUser.jsp">创建一个账户</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
</section>
<jsp:include page="${pageContext.request.contextPath}/pages/index/footer.jsp"/>
</body>

</html>
